<template>
  <div class="pb-32">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 8 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="项目名称"
        name="name"
        :rules="[{ required: true, message: '请输入项目名称' }]"
      >
        <a-input placeholder="请输入项目名称" v-model:value="formState.name" />
      </a-form-item>

      <a-form-item
        label="项目种类"
        name="typeId"
        :rules="[{ required: true, message: '请输入项目种类' }]"
      >
        <a-select ref="select" placeholder="请选择项目结构" v-model:value="formState.typeId">
          <a-select-option v-for="item in typeOptions" :key="item.id" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="项目信息"
        name="comment"
        :rules="[{ required: true, message: '请输入项目信息' }]"
      >
        <a-input placeholder="请输入项目信息" v-model:value="formState.comment" />
      </a-form-item>

      <a-form-item
        label="项目结构"
        name="structId"
        :rules="[{ required: true, message: '请选择项目结构' }]"
      >
        <a-select ref="select" placeholder="请选择项目结构" v-model:value="formState.structId">
          <a-select-option v-for="item in structOptions" :key="item.id" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
        <!-- <img class="w-full" src="../../../assets/images/qiao.png" alt="" /> -->
        <thisUpload ref="upload" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
        <a-button type="primary" html-type="submit">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { defHttp, HOST } from '/@/utils/http/axios';
import thisUpload from './upload.vue';
import { v4 } from 'uuid';

interface FormState {
  name: string;
  comment: string;
  typeId: number | null;
  structId: number | null;
}
export default defineComponent({
  components: { thisUpload },
  setup(props, { emit }) {
    const upload = ref();

    const formState = ref<FormState>({
      name: '',
      comment: '',
      typeId: null,
      structId: null,
    });

    let typeOptions = ref([]);
    let structOptions = ref([]);

    defHttp.get({ url: '/project-struct/get-all' }).then((res) => {
      structOptions.value = res.data;
    });

    defHttp.get({ url: '/project-type/get-all' }).then((res) => {
      typeOptions.value = res.data;
    });

    function setForm({ name, comment, typeId, structId, logo }) {
      formState.value = {
        name,
        comment,
        typeId,
        structId,
      };
      if (logo) {
        let arr = logo.split(',').map((item) => {
          return {
            uid: v4(),
            name: '',
            status: 'done',
            url: HOST + '/szfiles' + item,
          };
        });
        upload.value.fileList.push(...arr);
      }
    }

    function onFinish() {
      let logo = upload.value.fileList
        .map((item) => {
          return item.response
            ? item.response.data[0].url
            : '/images/' + item.url.split('/images/')[1];
        })
        .join(',');
      emit('next', {
        ...formState,
        logo,
      });
    }

    return {
      formState,
      structOptions,
      typeOptions,
      setForm,
      onFinish,
      upload,
    };
  },
});
</script>
  
  